<template>
  <!-- 只保留内容区 -->
  <div :class="styles['page-header']">
    <h1 :class="styles['page-title']">考试历史</h1>
    <p :class="styles['page-subtitle']">查看您的历次考试记录和成绩</p>
  </div>
  <div :class="styles['history-list']">
    <div v-for="record in history" :key="record.id" :class="styles['history-card']">
      <div :class="styles['history-header']">
        <h3 :class="styles['history-title']">{{ record.title }}</h3>
        <span :class="[styles['history-status'], styles[record.status]]">{{ getStatusLabel(record.status) }}</span>
      </div>
      <div :class="styles['history-info']">
        <span>考试时间：{{ formatDateTime(record.time) }}</span>
        <span>得分：<b>{{ record.score }}</b> / {{ record.totalScore }}</span>
      </div>
      <div :class="styles['history-actions']">
        <button :class="styles['action-btn']" @click="viewDetail(record.id)">查看详情</button>
        <button v-if="record.status === 'completed'" :class="styles['action-btn']"
          @click="viewResult(record.id)">查看成绩</button>
      </div>
    </div>
    <div v-if="history.length === 0" :class="styles['empty-state']">
      <div :class="styles['empty-icon']">📚</div>
      <h3 :class="styles['empty-title']">暂无考试历史</h3>
      <p :class="styles['empty-text']">您还没有参加过任何考试。</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import styles from '@/styles/student/exam-history.module.css'

const router = useRouter()

const history = ref([
  { id: 1, title: 'Java基础期末考试', status: 'completed', time: '2024-01-20 14:00:00', score: 92, totalScore: 100 },
  { id: 2, title: '数据库原理期中考试', status: 'completed', time: '2024-01-18 10:00:00', score: 85, totalScore: 100 },
  { id: 3, title: '数据结构与算法考试', status: 'completed', time: '2024-01-15 09:00:00', score: 78, totalScore: 100 }
])

const getStatusLabel = (status) => {
  const labels = {
    completed: '已完成',
    in_progress: '进行中',
    expired: '已过期'
  }
  return labels[status] || status
}

const formatDateTime = (dateTime) => {
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const viewDetail = (id) => {
  router.push(`/student/exam/${id}/detail`)
}
const viewResult = (id) => {
  router.push(`/student/exam/${id}/result`)
}
</script>